<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:17:25
 * @LastEditors: charles
 * @LastEditTime: 2021-12-17 14:53:00
-->
<template>
  <!-- template模板中用于编写html代码 -->
  <div>
    <!-- 按钮区域 -->
    <div>
      <!-- 新增按钮 -->
      <el-button type="primary" size="small">添加</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="tableData.list" style="width: 100%">
        
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        
        <el-table-column prop="name" label="项目名称"> </el-table-column>
        
        <el-table-column prop="serial_number" label="项目编号" width="80">
        </el-table-column>
        
        <el-table-column
          prop="longitude"
          label="经度"
          width="160"
          align="center"
        >
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.longitude == null || scope.row.longitude == ''"
              size="mini"
              type="info"
              >暂无
            </el-tag>
            <span v-else>{{ scope.row.longitude }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="latitude"
          label="纬度"
          width="160"
          align="center"
        >
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.latitude == null || scope.row.latitude == ''"
              size="mini"
              type="info"
              >暂无</el-tag
            >
            <span v-else>{{ scope.row.latitude }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="video" label="视频" align="center">
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.video == null || scope.row.video == ''"
              size="mini"
              type="info"
              >暂无</el-tag
            >
            <span v-else>{{ scope.row.video }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="绑定状态" width="80" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.bind_status == 1" size="mini"
              >已绑定</el-tag
            >
            <el-tag v-else type="danger" size="mini">未绑定</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="在线状态" width="80" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.online_status == 1" size="mini"
              >在线</el-tag
            >
            <el-tag v-else type="danger" size="mini">离线</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="80" align="center">
        </el-table-column>
      
      </el-table>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      name: "zhangsan",
      tableData: {},
    };
  },
  methods: {
    // 分页查询设备数据
    pageQueryDevices() {
      // 使用axios封装的get方法，发送http请求
      get("/device/pageQuery", {
        page: 1,
        pageSize: 10,
      }).then((res) => {
        // 将后台接口返回的结果，赋值给tableData
        this.tableData = res.data;
      });
    },
  },
  created() {
    // 在vue的created生命周期阶段，调用查询设备的方法
    this.pageQueryDevices();
  },
};
</script>
<style scoped>
/* scoped标识当前样式表是有局部作用于的，为了防止样式的全局污染 */
</style>